@inbiz-prefix: inbiz;
@inbiz-primary-color: var(--inbiz-color-primary);
@inbiz-base-color: #666;
@inbiz-base-cell-color: #333;
@inbiz-modal-border-color: #d6d9e3;
@inbiz-page-border-color: #ddd;
@inbiz-ccc-color: #ccc;
@inbiz-fff-color: #fff;
@inbiz-aaa-color: #aaa;
@inbiz-btn-border-color: #f2f2f2;
@inbiz-icon-base-color: #999;
@inbiz-bg-hover-color: #f5f5f5;
@inbiz-table-head-bg: #f8f8f8;
@soterbg: #e6f7ff;
@zebra-bg: #fafafa;
@zebra-bg-hover: #f0f0f0;

@table: ~'@{inbiz-prefix}-subtable';
@modal: ~'@{inbiz-prefix}-config-modal';
@actions: ~'@{inbiz-prefix}-subtable-actions';
@search: ~'@{inbiz-prefix}-search';
@fieldItemGroup: ~'@{inbiz-prefix}-field-item-group';
@toolbar: ~'@{inbiz-prefix}-subtable-toolbar';
@tableTop: ~'@{inbiz-prefix}-table-top';
@drawer: ~'@{inbiz-prefix}-table-drawer';

.modal-buttons {
  justify-content: flex-end;
  .ant-btn{
    border-radius: var(--inbiz-border-radius-base);
  }
}

.editable-table {
  .ant-table-cell {
    .setterIcon {
      position: inherit;
      left: 0;
    }
  }
}

.@{fieldItemGroup} {
  display: flex;

  .ant-formily-item {
    width: 100%;

    &:last-child {
      width: 30%;
    }
  }
}

.@{inbiz-prefix}-table-custom-columns {
  padding: 6px;
}

.@{table} {
  // position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  // padding: 0 20px;
  .ant-table {
    .ant-table-cell.index {
      padding-left: 8px;
      padding-right: 8px;
    }
  }
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: @inbiz-ccc-color;
    border-radius: 3px;
  }

  .ant-table-container {
    border: 1px solid @inbiz-btn-border-color;
    border-radius: 0;
    // overflow: hidden;
  }
  .ant-table-wrapper {
    position: relative;
  }

  // .ant-table-tbody > tr > td {
  //   padding: 17px 8px;
  // }
  // .ant-table.ant-table-small .ant-table-tbody > tr > td {
  //   padding: 9px 8px;
  // }

  .ant-table-wrapper {
    margin-top: 1px;
  }

  .ant-table-thead {
    background: @inbiz-table-head-bg;

    .ant-table-cell.index {
      max-width: 50px;
    }

    .ant-table-cell.ant-table-selection-column {
      max-width: 50px;

      .ant-checkbox-input {
        width: 18px;
        height: 18px;
      }
    }
  }

  .inbiz-subtable-actions .ant-btn.ant-btn-link:not(:disabled) {
    margin-right: 15px;
    padding: 0;
    color: @inbiz-primary-color  !important;
  }
  .inbiz-subtable-actions .anticon{
    color: @inbiz-primary-color  !important;
    margin-right:6px;
  }

  .ant-table-cell.index.inbiz-table-cell>.antd-self-sort-wrap {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .antd-self-sort-wrap .ant-table-column-sorter {
    display: none;
  }

  //.ant-table .ant-table-thead > tr {
  //  .index {
  //    padding: 8px 10px;
  //  }
  //}
  .ant-table .ant-table-thead>tr>th {
    //padding: 8px 15px;
    box-sizing: border-box;
    color: @inbiz-base-cell-color;
    white-space: nowrap;
    background: @inbiz-table-head-bg;
    .common-font;
    //height: 38px;

    .react-resizable-handle.react-resizable-handle-se {
      background: @inbiz-table-head-bg;
    }
  }

  .ant-table .ant-table-thead>tr>.ant-table-cell-scrollbar {
    width: 6px;
    padding: 0;
  }

  .ant-table .ant-table-tbody>tr>td {
    .common-font;
    //padding: 8px 15px;
    box-sizing: border-box;
    color: var(--inbiz-color-heading);
    white-space: nowrap;
    //height: 38px;
  }

  .ant-table-thead>tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not(td[colspan])::before {
    width: 0;
  }

  .ant-table .ant-table-row-selected {
    .inbiz-table-cell.ant-table-column-sort {
      background: @soterbg  !important;
    }
  }

  .ant-table-cell.actions.inbiz-table-cell {
    .inbiz-actions {
      .ant-btn.action-item.ant-btn-link .anticon {
        color: var(--inbiz-color-primary) !important;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .ant-table .inbiz-table-cell:not(.index) {
    min-width: 100px;
  }

  .ant-table .subtable-clickrow {
    .ant-table-cell-fix-left, .ant-table-cell-fix-right {
      background-color: @zebra-bg;
    }
    background-color: @zebra-bg;
  }

  .ant-table .ant-table-row {
    //height: 38px;
    box-sizing: border-box;
    // cursor: grab;

    &:hover {
      background: @zebra-bg;

      .inbiz-table-cell.ant-table-column-sort {
        background: @zebra-bg;
      }
    }

    &:last-child .ant-table-cell {
      border-bottom: 0;
    }

    .inbiz-table-cell.actions {
      cursor: pointer;

      .ant-btn {
        height: 22px;
      }
    }

    .inbiz-table-cell.ant-table-column-sort {
      background: #fff;
    }
  }

  .ant-btn span {
    .common-font;

    margin-right: 0;
    letter-spacing: 0;
  }

  .ant-pagination.ant-table-pagination {
    position: sticky;
    bottom: 0;
    z-index: 5;
    box-sizing: border-box;
    margin: 0;
    padding: 15px 0;
    background: #fff;

    li.ant-pagination-prev,
    li.ant-pagination-next {
      background-color: @inbiz-table-head-bg;
      border: none;
    }

    li.ant-pagination-item-active {
      color: @inbiz-primary-color;
      border: solid 1px @inbiz-primary-color;
    }

    li {
      &:not(.ant-pagination-disabled):not(.ant-pagination-item-active) {

        a,
        span {
          .common-font;

          color: @inbiz-base-color;
          font-family: Arial;
          line-height: 32px;
        }

        .ant-pagination-item-ellipsis {
          color: @inbiz-ccc-color;
        }
      }

      min-width: 32px;
      height: 32px;
      margin-left: 8px;
      line-height: 32px;
      border: solid 1px @inbiz-page-border-color;

      &:first-child {
        margin-right: 8px;
        border: 0;
      }

      &:last-child {
        margin-left: 0;
      }
    }

    li.ant-pagination-options {
      .common-font;

      position: absolute;
      left: 0;
      color: @inbiz-base-color;
      border: none;

      .ant-select-arrow {
        span {
          line-height: 14px;
        }
      }

      .ant-select-selector {
        height: 32px;

        .ant-select-selection-item {
          height: 32px;
          line-height: 32px;
        }
      }
    }
  }

  .subtable-action {
    margin-top: 10px;

    .ant-btn.ant-btn-primary.action-item {
      height: 28px;
      padding: 0 15px;
      color: @inbiz-primary-color;
      line-height: 28px;
      text-shadow: none;
      background: none;
      border: 1px solid @inbiz-primary-color;
      border-radius: 13px;
      box-shadow: none;
      margin-right: 10px;
    }

    .ant-btn.ant-btn-default {
      // background: none;
      height: 28px;
      padding: 0 15px;
      line-height: 28px;
      text-shadow: none;
      border-radius: 13px;
      box-shadow: none;
      margin-right: 10px;
    }
  }
}

.@{table}-show-antd-empty {
  .ant-table-body {
    .ant-empty-image {
      display: none;
    }

    .ant-empty-description {
      display: none;
    }
  }
}

.inbiz-subTable-zebra {
  .ant-table-row:nth-child(odd) {
    background: @zebra-bg;

    .inbiz-table-cell.ant-table-column-sort {
      background: @zebra-bg;
    }

    .inbiz-table-cell {
      background: @zebra-bg;
    }

    //&:hover {
    //  transition: none;
    //  background: @zebra-bg-hover;
    //  .inbiz-table-cell.ant-table-column-sort {
    //    background: @zebra-bg-hover;
    //  }
    //  .ant-table-cell-fix-left, .ant-table-cell-fix-right {
    //    background: @zebra-bg-hover;
    //    transition: none;
    //  }
    //}

    .ant-table-cell-fix-left,
    .ant-table-cell-fix-right {
      background: @zebra-bg;
    }
  }
}

.row-dragging {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  color: @inbiz-icon-base-color;
  background: #fafafa;
  border: 1px solid @inbiz-ccc-color;
  cursor: grab;
}

.row-dragging td {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 16px;
  background: #fafafa;
  border: 0;
}

.row-dragging .drag-visible {
  visibility: visible;
}

.inbiz-ant-btn {
  height: 38px;
  border: solid 1px @inbiz-page-border-color;

  &.ant-btn-link {
    color: @inbiz-primary-color;
    border: none;

    svg {
      width: 16px;
      height: 16px;
    }
  }

  &.ant-btn-primary {
    background: @inbiz-primary-color;
    border: none;

    svg {
      width: 16px;
      height: 16px;
    }
  }

  &:not(.ant-btn-primary) {

    &:hover,
    &:focus {
      color: @inbiz-primary-color;
      border-color: @inbiz-primary-color;
    }
  }
}

.@{drawer} {
  .ant-drawer-header {
    height: 39px;
    padding: 10px 15px;
    border-bottom: 1px solid @inbiz-modal-border-color;
    border-radius: 2px 2px 0 0;

    .ant-drawer-body {
      padding: 15px;
    }

    .ant-drawer-header-title {
      display: flex;

      .ant-drawer-title {
        .common-font;

        color: @inbiz-base-color;
        line-height: 30px;
      }

      .ant-drawer-close {
        order: 1;
        margin: 0;
        color: @inbiz-aaa-color;
      }

      .ant-drawer-close:focus,
      .ant-drawer-close:hover {
        color: @inbiz-base-cell-color;
      }
    }
  }

  .ant-drawer-footer {
    display: flex;
    justify-content: flex-end;
    padding: 15px;

    .inbiz-actions {
      .action-item {
        height: 32px;
      }
    }
  }
}

.common-font {
  font-weight: normal;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-stretch: normal;
  line-height: 22px;
  letter-spacing: 0;
}

.table-top-mb {
  margin-bottom: 20px;
}

.@{inbiz-prefix}-config-subwindow.ant-input-group.ant-input-group-compact>*:not(:last-child) {
  margin-right: 0;
  border-right-width: 0;

  .ant-select {

    &:focus,
    &:hover {
      margin-right: 0;
    }
  }
}

.@{tableTop} {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    .common-font;

    position: relative;
    display: flex;
    color: @inbiz-primary-color;
    line-height: 38px;

    .@{inbiz-prefix}-search-btn {
      height: 38px;
      cursor: pointer;
    }

    .anticon {
      margin-right: 6px;
    }

    .ball {
      position: absolute;
      top: 0;
      width: 5px;
      height: 5px;
      background-color: @inbiz-primary-color;
      border-radius: 100%;
    }
  }
}

.@{toolbar} {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: auto;
}

.subTable-dropdown-overlay-menu {
  width: 116px;
  padding: 0;
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);

  .ant-dropdown-menu-item {
    width: 116px;
    height: 36px;
    padding: 0 8px;
    border-radius: 4px;

    .ant-dropdown-menu-title-content {
      .ant-btn {
        .common-font;

        width: 100%;
        height: 38px;
        padding: 10px 15px;
        color: @inbiz-base-cell-color;
        text-align: left;
        border: 0;

        span {
          margin-right: 0;
          letter-spacing: 0;
        }

        &:focus,
        &:hover {
          color: @inbiz-base-cell-color;
          background-color: @inbiz-bg-hover-color;
        }
      }
    }

    &:hover,
    &:active {
      background-color: transparent !important;
    }
  }
}

.@{inbiz-prefix}-del {
  .ant-popover-inner-content {
    height: 90px;
  }
}

.no-children {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  color: @inbiz-base-color;
  background: #f0f0f0;
  border: 1px dashed @inbiz-aaa-color;
}

.dn-array-table {
  background-color: #fff;
}

.react-resizable {
  position: relative;
  background-clip: padding-box;
}

.react-resizable-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 100%;
  cursor: col-resize;
}

.react-resizable-handle.active::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: solid 1px black;
  content: '';
}

.@{inbiz-prefix}-subTable-pagination {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  background: #fff;
}

@media all {
  .page-break {
    display: none;
  }
}

@media print {

  html,
  body {
    height: initial !important;
    overflow: initial !important;
    -webkit-print-color-adjust: exact;
  }
}

@media print {
  .page-break {
    display: block;
    margin-top: 1rem;
    page-break-before: auto;
  }
}

@page {
  margin: 10mm;
  size: auto;
}

.subtable-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 10px auto;
  padding-left: 0;
  border: none;
}

.subtable-inline {
  position: relative;
  height: 27px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  &-icon {
    display: none;
  }

  &:hover {
    & .subtable-inline-icon {
      position: absolute;
      right: 0;
      display: inline;
      cursor: pointer;
    }
  }
}

.edit-inline-td {

  .ant-formily-item.ant-formily-item-feedback-layout-loose.web,
  .ant-formily-item.ant-formily-item-feedback-layout-loose.web.ant-formily-item-feedback-has-text:not(.ant-formily-item-inset) {
    margin-bottom: 0;
  }

  .ant-formily-item-error-help {
    display: none;
  }

  //非聚焦下无边框
  .ant-input,
  .ant-input-affix-wrapper,
  .inbiz-EformSelectMember-SelectExtend,
  .ant-input-number,
  .ant-picker,
  .selectedMain .selectButton,
  .ant-select:not(.ant-select-customize-input) .ant-select-selector {
    background-color: inherit;
    border: none;
    outline: none;
  }

  //输入框无边框
  .ant-input:focus,
  .ant-formily-item-error .ant-input-affix-wrapper-focused,
  .ant-input-affix-wrapper:focus,
  .ant-input-affix-wrapper-focused {
    box-shadow: none;
  }

  textarea.ant-input {
    padding: 0 11px;
  }

  .ant-input-textarea-show-count::after {
    margin-top: -10px;
  }

  //数字框无边框
  .EformNumberContainer .efromNumber.ant-input-number-focused {
    border: none;
    box-shadow: none;
  }

  //日期无边框
  .ant-picker-focused {
    box-shadow: none;
  }

  //静态列表
  .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
    border: none;
    outline: none;
    box-shadow: none;
  }

  .ant-formily-item-error .ant-input-number:not([disabled]):hover,
  .ant-formily-item-error .ant-picker:not([disabled]):hover {
    background-color: inherit;
  }

  //成员选择
  // .inbiz-EformSelectMember-SelectExtend{
  //   flex-direction: row-reverse;
  // }
  .inbiz-EformSelectMember-SelectExtend.active-focus {
    border: none;
    outline: none;
    box-shadow: none;
  }

  //文件选择列表优化
  .selectListName {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
  }

  //隐藏域
  .EformHidden {
    padding-left: 8px;
    color: var(--inbiz-color-heading);
    text-align: left;
  }

  .EformHidden.ant-input[disabled] {
    cursor: default;
  }
}

.ant-table .ant-table-tbody>tr>td.edit-inline-float {
  position: relative;
  padding: 0;
  overflow: visible;
}

.edit-inline-active {
  .subtable-inline-form {
    border: 1px solid var(--inbiz-color-primary);
  }
}

.edit-inline-active-error .subtable-inline-form {
  border: 1px solid #f00;
}

.edit-inline-float .subtable-inline-form {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  padding-top: 8px;
  background: #fff;
}

.selectedMain .inline-edit {
  max-height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
}

.inline-edit .selectedMain {
  min-width: unset;

  &>div {
    justify-content: center;
  }
}

.inline-edit .selectedMain .selectButton {
  min-width: unset;
}

.inline-edit .selectListBox {
  display: flex;
  justify-content: center;
  padding: 0 5px;

  .selectListName {
    flex: 1;
    margin-right: 5px;
  }
}

// 文件/文件夹选择单选
.selectedMain.inline-edit {
  &>div {
    width: 100%;

    .radioNameBox {
      flex: 1;
      width: 0;
      margin-right: 5px;

      &>.radioName {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}

.designable-table {
  padding: 0;

  table {
    overflow: hidden;
  }
}